<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>抱抱堂-摇摇乐</title>
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="{:C('IMG_PATH')}static/css/main.css?v=12">
  <style>
  h2{
      color: #FED046;
      font-size: 18px;
  }
  h3{
      color:#333333;
      font-size: 16px;
      line-height: 28px;
  }
  header.mycard p{
      color: #666666;
      line-height: 1.4em;
  }
  header.mycard p span{
      color:#E95366;
  }
  .store{
      text-align: center;
      color: #666;
  }
  .store div img{
      width: 40vw;
      width: 100%;
  }
  .store div{
      padding-top: 8vw;
      margin-top: 4vw;
      background-image: url({:C('IMG_PATH')}static/img/fireworks.png);
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 60vw auto;
  }
  .store p{
      line-height: 2em;
      padding-bottom: 1em;
  }
  section.white{
      text-align: center;
      margin-top: 8vh;
  }
  section.white img{
      height: 10vw;
  }
  #container{
      width: auto;
      height: 320px;
  }
  </style>
</head>
<body class="linear-bg white" style="height:auto">
    <section class="card" style="margin-top:18px;">
        <header class="mycard">
            <img src="{$user_info.weixin_avatar}" />
            <h3>{$user_info.nickname}</h3>
            <p>在{$storeName ? $storeName : '抱抱堂' }, {$congratulations}</p>
        </header>
        <div class="store">
            <div id="container">
                <!--<img src="{$storeCover}" />-->
            </div>
        </div>
    </section>
  <section class="illustrate">
      <section>
          <h2>去店里，打开蓝牙</h2>
          <img src="{:C('IMG_PATH')}static/img/illustrate.png" />
      </section>
      <section>
          <button class="long-yellow-btn follow">立即关注</button>
          <p>你也可以关注公众号，了解更多摇摇乐活动详情。</p>
      </section>
  </section>
  <section class="white"><img src="{:C('IMG_PATH')}static/img/logo_white.png" />　<img src="{:C('IMG_PATH')}static/img/yyl_logo@2x.png" /></section>
</body>
<script src="{:C('IMG_PATH')}/static/js/zepto.min.js"></script>
<script src="http://zb.weixin.qq.com/nearbycgi/addcontact/BeaconAddContactJsBridge.js"></script>
<script>
    $(".follow").on("click", function(){
        BeaconAddContactJsBridge.invoke('checkAddContactStatus',{} ,function(apiResult){
            if(apiResult.err_code == 0){
                var status = apiResult.data;
                if(status != 1){
                    BeaconAddContactJsBridge.invoke('jumpAddContact');
                }
            }
        });
    });
</script>

<script>
function init() {
    var lat = '{$coordinate['latitude']}';
    var lng = '{$coordinate['longitude']}';
    if(!lat){
        $('#container').html('<h3 style="color:#FF0000;line-height:4em;">哎呀，店老板把自己的位置给忘啦~</h3>');
        $('#container').css('height', 'auto');
        return;
    }
    //设置地图中心点
    var myLatlng = new qq.maps.LatLng(lat, lng);
    //定义工厂模式函数
    var myOptions = {
        zoom: 14,               //设置地图缩放级别
        center: myLatlng,      //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
    }
    //获取dom元素添加地图信息
    var map = new qq.maps.Map(document.getElementById("container"), myOptions);

    var infoWin = new qq.maps.InfoWindow({
        map: map
    });
    infoWin.open();
    //tips  自定义内容
    infoWin.setContent('<div style="text-align:left;font-size:1.2em">'+
            '<img style="float:left;height:50px;width: auto" src="{$storeCover}" /> '+
            '<span style="display: inline-block;padding-left: 5px;">{$storeName}</span></div>');
    infoWin.setPosition(myLatlng);
}
//异步加载地图库函数文件
function loadScript() {
    //创建script标签
    var script = document.createElement("script");
    //设置标签的type属性
    script.type = "text/javascript";
    //设置标签的链接地址
    script.src = "http://map.qq.com/api/js?v=2.exp&callback=init";
    //添加标签到dom
    document.body.appendChild(script);
}

window.onload = loadScript;    // dom文档加载结束开始加载 此段代码
</script>
</html>
